<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自由练习</title>
		<include file="./Public/weui2.0/__head.html"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
		<link href="__PUBLIC__/css/exercise.css" type="text/css" rel="stylesheet"/>
		<link rel="stylesheet" href="__PUBLIC__/css/style.css">
        <link rel="stylesheet" href="__PUBLIC__/css/pages.css">
		<script src="__PUBLIC__/font/iconfont.js"></script>
		<style type="text/css">
			.bar {padding: 0; padding: 0 20px; background-color:#fbf9fe; color: #476777; }
			.title {background-color:#fbf9fe; color: #476777;}
            .bar .icon {margin: 10px 0; padding: 0; }
            .picker-button {font-size: 14px; color: #476777;}
            .weui-badge{background-color: #cc99cc;}
		</style>
	</head>
	<body>
		<header class="bar bar-nav">
	        <div class="title">{$quesItem.chapter}</div>
	        <a href="{:U('Exercise/index')}" class="pull-left"><svg class="icon icon-left .icon-title" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-fanhui"></use></svg></a>
	        <a href="javascript:;" class="pull-right open-popup" data-target="#half"><svg class="icon icon-left .icon-title" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-all"></use></svg></a>
	    </header>

		<div class="content">
			
			<div class="title-progerss">
				<ul>
					<li class="open-popup" data-target="#half" style="width: 74%; text-align: left;">
						<span><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-jindu1"></use></svg>{$quesItem.id|default="24"}/{$record.sum|default='112'}
						</span>
						<span style="margin-left: 5px;"><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-zhengque1"></use></svg>{$record.rig_cot|default='23'}</span>
						<span style="margin-left: 5px;"><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-cuowu"></use></svg>{$record.wrg_cot|default='123'}</span>
					</li>
					<li id ="collect" style="width: 24%;text-align: right; ">
						<span ><svg class="icon_progress" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-shoucang1"></use></svg><span id="collect_tip">收藏</span></span>
					</li>
					
				</ul>
			</div>
			
			<div class="c-pic">
				<span class="weui-badge">{$quesItem.type}</span>
				<!-- <span class="weui-badge" style="margin-left: 5px;">{$quesItem.chapter}</span> -->
				{$quesItem.contents}
			</div>
			<!-- <img class="c-pic" src="__PUBLIC__/images/pic.jpg"> -->
			<div class="c-table">

				<!-- option exit -->
				<if condition="$quesItem.option_a neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-a">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-a"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_a}</lable>
						</div>
					</a>
				</if>

				<if condition="$quesItem.option_b neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-b">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-b"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_b}</lable>
						</div>
					</a>
				</if>

				<if condition="$quesItem.option_c neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-c">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-c"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_c}</lable>
						</div>
					</a>
				</if>

				<if condition="$quesItem.option_d neq ''">
					<a href="javascript:;">
						<div class="option-area" id="option-d">
						    <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-d"></use></svg></span>
						    <lable class="option-contents">{$quesItem.option_d}</lable>
						</div>
					</a>
				</if>

<!-- 				<div id="right_answer">
					<if condition="$done eq '1'">
						<span class="rightAns">正确答案：{$quesItem.right_answer}</span>
					</if>
				</div> -->
	
			</div>


			<!-- <a class="submit" href="{('Exercise/exercise')}">下一题</a> -->
			<a class="c-button" id="submit" href="javascript:;">确定</a>

			<a class="c-button" href="{:U('Repeat/repeat_chap', array(
			'chapid'=>session('chapid'),
			'typeid'=>session('typeid'),
			'quesid'=>session('quesid')+1)
			)}">下一题</a>
		</div>

		<div class='demos-content-padded'></div>

		<div id="half" class='weui-popup__container popup-bottom'>
		    <div class="weui-popup__overlay"></div>
		    <div class="weui-popup__modal">
		        <div class="toolbar">
			        <div class="toolbar-inner" >
			        	<a href="{:U('Repeat/repeat_index')}" class="picker-button">更多</a>
				       <div class="helf-title">入学考试题库</div>				       
				    </div>
		            
		        </div>
		        <div class="modal-content" style="height: auto; max-height: 400px; color: #000;">

		        <!-- sample -->
					<!-- right c3edfd -->

		           <!--  <div class="weui-flex">
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder">1</div></a>
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder-right">2</div></a>
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder-wrong">3</div></a>
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder-doing-now">4</div></a>
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder">5</div></a>
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder">6</div></a>
				      <a class="weui-flex__item" href="javascript:;"><div class="placeholder">7</div></a>
				    </div> -->

					<!-- 分 首列 尾列 都不是 三种情况考虑 -->

		        	<volist name="quesList" id="quesList" key="k" >
		        		<if condition="($k)%7 eq 1">
		        			<div class="weui-flex">
							    <a class="weui-flex__item" href="{$quesList.id|get_repeat_url_css=###}"><div class="{$quesList.id|get_repeat_index_css=###}">{$quesList.id}</div></a>
						<elseif condition="($k)%7 eq 0"/>
							<a class="weui-flex__item" href="{$quesList.id|get_repeat_url_css=###}"><div class="{$quesList.id|get_repeat_index_css=###}">{$quesList.id}</div></a>
							    </div>
						<else /> 
							<a class="weui-flex__item" href="{$quesList.id|get_repeat_url_css=###}"><div class="{$quesList.id|get_repeat_index_css=###}">{$quesList.id}</div></a>
						</if>
					</volist>
				   

		        </div>
		    </div>
		</div>
	</body>
</html>
<include file="./Public/weui2.0/__foot.html"/>
<script type="text/javascript">
	// 获取页面加载的时间
    var start_time = new Date();  
    var click_times = {'A':0, 'B':0, 'C':0, 'D':0};


    $('.option-area').click(function(){
    	var use       = $(this).find('use')[0];
		var icon_attr = use.getAttribute('xlink:href');
		var option    = icon_attr.substring(13,14).toUpperCase(); //选项
		click_times[option] ++;

		// 判断该选项是否选中
		if(click_times[option] % 2 == 0) {
			use.setAttribute('xlink:href', icon_attr.substring(0,14));
		} else {
			use.setAttribute('xlink:href', icon_attr + '-select');
		}

		// $('.c-table a').removeAttr('href'); //取消a：herf 取消点击样式
		// $('.option-area').unbind(); //移除被选元素的事件处理程序

    });


    $('#submit').click(function(){
    	//opyion储存用户选择的选项，格式例如ABD
    	var option = "";
    	for (x in click_times)
		{
			if (click_times[x] % 2 == 1) {
				option += x;
			}
		}
		// alert(option);

	  	// 对用户未选择情况做处理
	  	if (option == '') {
	  		$.alert('你还没有选择答案');
	  		return false;
	  	}
		if (option.length == 1) {
	  		$.alert('至少选择2个选项！');
	  		return false;
	  	}


		var url   = "{:U('Repeat/submit')}";
		var now   = new Date();
		var time  = Math.ceil((now.getTime() - start_time.getTime()) / 1000);
		
		var data = {
			'quesid':<?php echo  session('quesid');?> , 
			'option': option,
			'time'  : time
		}

        $.post(url, data, function(res){
        	//res为正确答案
        	

            //if(res != 'done'){
            	$('#right_answer').html('正确选项：'+ res);
                for (x in click_times)
                {
                    var use = $('#option-'+x.toLowerCase()).find('use')[0];

                    if (res.indexOf(x) != -1) {
                        if (option.indexOf(x) != -1) {
                            // 选择，正确答案：打对勾
                            use.setAttribute('xlink:href', '#icon-option-right');

                        } else {
                            // 不选择，正确答案：改底色
                            var icon_attr = use.getAttribute('xlink:href');
                            use.setAttribute('xlink:href', icon_attr + '-select');
                        }
                    } else {
                        if (option.indexOf(x) != -1) {
                            // 选择，错误答案：打错号
                            use.setAttribute('xlink:href', '#icon-option-wrong');
                        } else {
                            // 不选择，错误答案：不处理
                        }
                    }
                }
            //}else{
            	//$.alert("你已经做过此题！","确定");  
            //}

		$('.c-table a').removeAttr('href'); //取消a：herf 取消点击样式
		$('.option-area').unbind(); //移除被选元素的事件处理程序

        });

		// 隐藏确定键
        $(this).hide();

    });

    // 定义收藏点击的次数
    var click_select = 0;
    // 点击选项后上传答案
    $('#collect').click(function (){
		// 用点击基数次数 偶数次数来判定是否选择
		click_select ++;
		var selec_icon = $(this).find('use')[0];

		if (click_select % 2 == 1) {
			// 收藏
			var url = "{:U('Collect/collect')}";
			var data = {};
			$.post(url, data, function(res){
	          	selec_icon.setAttribute('xlink:href', '#icon-shoucang11');
				$('#collect_tip').html('已收藏');
	        });

		} else {
			// 取消收藏
			var url = "{:U('Collect/cancel')}";
			var data = {};
			$.post(url, data, function(res){
				selec_icon.setAttribute('xlink:href', '#icon-shoucang1');
				$('#collect_tip').html('收藏');
			});
		}
	});
    

</script>

		<!-- <script type="text/javascript">
			var res = "{$quesItem.right_answer}";
			var option = "{$recordArr.answer}";
			//var use = document.getElementById("use");
			var use = document.getElementsByTagName("use");
			var myarray = new Array('A','B','C','D');
			
			for(var i=0;i<myarray.length;i++){
				var x = myarray[i];
				var y = i+6;
				if (res.indexOf(x)!=-1) {
					if(option.indexOf(x)!=-1){
						//document.write(x);
						use[y].setAttribute("xlink:href","#icon-tianchongxuanxiangkuangqueding");
					}else{
                        if(option!=''){
							//var icon_attr = use.getAttribute('xlink:href');
							use[y].setAttribute("xlink:href","#icon-option-right");
                        }else{
                        	
                        }
					}
				}else{
					if(option.indexOf(x)!=-1) {
						use[y].setAttribute("xlink:href","#icon-option-wrong");
					}else{

					}
				}
			}
		</script> -->